<template>
    <section id="qq-login">
        <img src="../../assets/images/mine/QQlogin.png" alt/>
        <span class="tip">亿万用户已选择QQ帐号登录应用</span>
        <p class="login">一键登录</p>
        <span class="tip-mogu">蘑菇街将获得以下权限：</span>
        <ul>
            <li v-for="(item,index) in content" v-if="index<=i"" >
                <i v-bind:class="{cur: index>1}"></i>
                <span>{{item}}</span>
            </li>
            <li class="last">
                <i></i>
                <span @click="show()">{{txt}}</span>
            </li>
        </ul>
    </section>
</template>

<script>
export default {
    data() {
        return {
            txt: "",
            flag: true,
            i: 1,
            sign:true,
            indexs:0,
            content: [
                "访问你的详细资料(必选)",
                "访问你的基础资料(必选)",
                "同步动态至QQ空间",
                "获得空间相册内容",
                "同步动态至Q+",
                "获取会员信息"
            ],
            bgpicDown: "./src/assets/images/mine/icon.png"
        };
    },
    mounted() {
        this.show();
    },
    methods: {
        show() {
            if (!this.flag) {
                this.i = this.content.length; //显示全部数据
                this.flag = !this.flag;
                this.txt = "点击收起";
            } else {
                this.i = this.content.length - this.content.length + 1; //显示两条数据
                this.flag = !this.flag;
                this.txt = "查看全部";
            }
        },
        // change(index){

        //     this.indexs = index;
        //     // if(this.sign){
        //     //     this.sign = !this.sign;
        //     // }else{
        //     //     this.sign = !this.sign;
        //     // }
        // }
    }
};
</script>

<style lang="scss">
#qq-login {
    text-align: center;
    padding: 20px;
    img {
        width: 30%;
        display: block;
        margin: 10px auto;
    }
    .tip {
        font-size: 14px;
        color: gray;
    }
    .login {
        color: white;
        line-height: 40px;
        border-radius: 6px;
        margin: 50px auto;
        background-color: #12b7f5;
    }
    .tip-mogu {
        display: block;
        text-align: left;
    }
    ul {
        text-align: left;
        padding-top: 10px;
        li {
            border: 1px solid rgb(218, 218, 218);
            border-bottom: none;
            padding: 10px 5px;
            line-height: 0px;
            &:first-child {
                border-radius: 5px 5px 0 0;
            }
            &:last-child {
                padding: 20px 0;
                border-radius: 0 0 5px 5px;
                border-bottom: 1px solid rgb(218, 218, 218);
            }
            i {
                display: inline-block;
                width: 15px;
                height: 15px;
                vertical-align: middle;
                background: url("../../assets/images/mine/necessary.png")
                    no-repeat center/70%;
                &.cur{
                    background: url("../../assets/images/mine/checked.png")
                    no-repeat center/70%;
                }
            }
            span {
                font-size: 12px;
                color: gray;
            }
            &.last {
                text-align: center;
                i {
                    background: url("../../assets/images/mine/icon.png")
                        no-repeat;
                    background-size: 35px 84px;
                    background-position: 1px -17px;
                }
            }
        }
    }
}
</style>

